<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">

    <!--BootStrap设计的页面支持响应式的 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入主题  -->

    <link href="/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />

    <!-- 引入bootstrap的css -->

    <link href="/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!-- 引入jquery的js  因为bootstrap使用到jquery的js -->

    <script src="/js/jquery-3.3.1.min.js"></script>

    <!-- 引入bootsrap的js -->

    <script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <title>商品详情</title>
    <style>

        .xiaotaoobject {
            height: 140px;
            width: 140px;
            object-fit: contain;
        }
        .myitem{

            width: 500px;
            height: 500px;
            margin-bottom: 20px;
        }
        .myimage{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .s1{
            width:auto;
        }
        .s2{
            width: 600px;
        }
        .myrow{
            width: 100px;
            height: auto;
            margin-top: 14px;
        }
        body{
            background-image: url("images/背景.jpg");
        }
    </style>
    <!--    进度条-->
    <link rel="stylesheet" href="blue/pace-theme-corner-indicator.css">
    <script src="js/pace.js"></script>
</head>
<body>
<!--/*@thymesVar id="pcs" type="com.example.login.Pojo.PCGoods"*/-->

<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <div class="row clearfix">
                <div class="col-md-6 column">
                    <img alt="小淘图标" class="xiaotaoobject "  src="images/order_a.jpg" />
                </div>
                <div class="col-md-6 column">
                    <div class="page-header">
                        <h1>
                            小淘商城<p><small>2020最新潮流</small></p>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 column">
            <ul class="breadcrumb">
                <li>
                    <a href="/">首页</a>
                </li>
                <li class="active">
                    <a href="#">商品详情</a>
                </li>

            </ul>
        </div>

    </div>
    <div class="row clearfix">
        <div class="col-md-6 column">
            <div class="myitem">
                <!--                加边框阴影-->
                <img alt="140x140" class="myimage img-thumbnail" src="images/1.jpg" id="img"th:src="@{'/Image/'+${pcs[0].goodImage}}"/> </div>


        </div>
        <div class="col-md-6 column">
            <h3>
                <strong th:text="${pcs[0].item_name}" id="item"></strong>
            </h3>
            <h4>
                限时特卖:<a id="price">1299</a>元
            </h4>
            <!--            用来添加介绍的-->
            <p th:text="${pcs[0].introduction}" id="introduction"></p>
            <!--            占位置-->
            <p> </p>
            <div class="row clearfix">
                <div class="col-md-4 column">
                    <div class="s2">
                        <p>
                            <strong>颜色+硬盘+内存</strong>
                        </p>
                    </div>
                    <form role="form">
                        <div class="form-group">
                            <select   name="sku_code" onchange="chg(this.value)"
                                      class=" s1 form-control" id="sku_code">
                                <div th:each="pc,index:${pcs}">
                                    <option th:value="${index.index}">
                                        <a th:text="${pc.color}"></a>+<a th:text="${pc.ROM}"></a>+<a th:text="${pc.RAM}"></a>
                                    </option>
                                </div>
                            </select>
                        </div>
                    </form>
                </div>

                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <p><strong>库存: </strong><a th:text="${pcs[0].num}" id="num"></a></p>
                        <strong>参与的优惠活动<strong/>
                            <ul>
                                <li>
                                    满300-50
                                </li>
                                <li>
                                    满100-5
                                </li>

                            </ul>

                            <strong> 特色服务</strong>
                            <p th:text="${pcs[0].combination}" id="combination"></p>
                            <dl>
                                <dt>
                                    发货地：<a>广东 广州</a>
                                </dt>
                                <dt>
                                    运费：<a th:text="${pcs[0].fright}" id="fright">0</a>元
                                </dt>
                                <dt>
                                    销量：<a th:text="${pcs[0].sell_num}" id="sell_num">1966</a>
                                </dt>
                            </dl>
                    </div>

                </div>
                <div class="row ">

                    <input class="btn-group" type="button" value="-" onclick="reductionOf(this)" />

                    <input style="width: 30px" class="btn-group" id="numOfItem"  type="text" value="1" onblur="checkNumber(this)" />

                    <input class="btn-group"  type="button" value="+" onclick="add(this)" />

                </div>
                <p> </p>
                <p> </p>
                <button class="btn btn-default" type="button"><a href="" id="cart" onclick="chg(i)">加入购物车</a></button>
                <button class="btn btn-default" type="button"><a  th:href="@{'/user/collect/'+${pcs[0].id}}" onclick="chg(i)">加入收藏夹</a></button>
                <button class="btn btn-default" type="button" ><a href="" id="buy" onclick="chg(i)">立即购买</a></button>
            </div>
            <!--/*@thymesVar id="msg" type="String"*/-->
            <strong style="color: #fd7e14" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></strong>
        </div>
    </div>

    <div class="thumbnail">
        <p>评论区(<a>1</a>)</p>
    </div>
    <div class="thumbnail">
        <div class="row ">
            <div class="col-md-1" >
                <img width="50" class="img-circle" src="images/background_black.jpg">
            </div>
            <div class="col-md-5 myrow">
                <p>:<a>4</a>星</p>
            </div>
        </div>
    </div>

</div>
<script th:inline="javascript">
    const pcs = [[${pcs}]];
    var sku_code =document.getElementById("sku_code").options;
    var numOfItem=1;
    var buyUrl="/user/order/"+pcs[0].id+"/"+numOfItem+"/"+pcs[0].sku_code;
    var i=0;
    document.getElementById("buy").href=buyUrl;
    var cartUrl="/user/cart/"+pcs[0].id+"/"+numOfItem+"/"+pcs[0].sku_code;
    document.getElementById("cart").href=cartUrl;
    function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    }
    function chg(index) {
        i=index;
        document.getElementById('img').src ="/Image/"+pcs[i].id+pcs[i].sku_code+"/"+pcs[i].image;
        document.getElementById('price').textContent=pcs[i].price;
        document.getElementById('combination').textContent=pcs[i].combination;
        document.getElementById('fright').textContent=pcs[i].fright;
        document.getElementById('num').textContent=pcs[i].num;
        //添加链接
        //更新商品选购数量
        numOfItem = document.getElementById('numOfItem').value;
        buyUrl="/user/order/"+pcs[i].id+"/"+numOfItem+"/"+pcs[i].sku_code;
        document.getElementById("buy").href=buyUrl;
        //更新介绍
        document.getElementById('introduction').textContent=pcs[i].introduction;
        //更新购物车链接
        cartUrl="/user/cart/"+pcs[i].id+"/"+numOfItem+"/"+pcs[i].sku_code;
        document.getElementById("cart").href=cartUrl;
    }
</script>
<script>
    //减数量
    function reductionOf(obj) {
        //减前判断
        if ($(obj).next().val() === ''||parseInt($(obj).next().val()) === 0) {
            $(obj).next().val(1);
            numOfItem=1;
        }
        numOfItem-=1;
        $(obj).next().val(parseInt($(obj).next().val()) - 1);//数值减
        $(obj).next().val($(obj).next().val());//赋值给框
    };
    //加数量
    function add(obj) {
        //加前判断
        if ($(obj).prev().val() === '') {
            $(obj).prev().val(1);
            numOfItem=1;
        }
        numOfItem+=1;
        $(obj).prev().val(parseInt($(obj).prev().val()) + 1);//数值加
        $(obj).prev().val($(obj).prev().val());//赋值给框
    };
    //校验数字格式（只能输入正整数）
    function checkNumber(obj) {
        var reg = /^[1-9]\d*$/;
        if(!reg.test($(obj).val()) || $(obj).val()===''){
            $(obj).val(1);
        }
    }
</script>

</body>
</html>